import MenuItem from "./MenuItem";

export default class SubMenu extends React.Component {
    render() {
        const { dataKey, icon, title, menus } = this.props;
        return (
            <li>
                <div className="edc-excel-submenu">
                    <span className="icon"><i className={icon} /></span>
                    <span className="title">{title}</span>
                    <ul className="submenu">
                        {menus.map(({ key, icon, title, number, ...menu }) => (
                            <MenuItem ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@c6mc0r@${key}`}
                                {...menu}
                                icon={icon}
                                title={title}
                                number={number}
                                dataKey={key}
                                onClickNumber={this.props.onClickNumber}
                                onChangeNumber={this.onChangeNumber}
                                onClick={this.onClick}
                            />
                        ))}
                    </ul>
                </div>
            </li>
        )
    }
    onClick = (subKey) => {
        const { dataKey, onClick } = this.props;
        if (onClick) {
            onClick([dataKey, subKey]);
        }
    }
    onChangeNumber = (subKey, value) => {
        const { dataKey, onChangeNumber } = this.props;
        if (onChangeNumber) {
            onChangeNumber([dataKey, subKey], value);
        }
    }
}